<template>
  <div>
    <div v-if="dialogVisible">
      <el-dialog
        :title="moduleObj[moduleType]"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <el-form
          ref="form"
          :show-message="false"
          :model="form"
          label-width="100px"
        >
          <div v-for="(item, index) in formTable" :key="index">
            <el-col
              v-if="item.type !== 'linkage'"
              :span="12"
              style="z-index: 99"
            >
              <el-form-item
                :label="item.label"
                :prop="item.prop"
                :rules="item.rule"
              >
                <el-input
                  v-if="item.type === 'input'"
                  v-model="form[item.prop]"
                  size="mini"
                  :disabled="moduleType === 'see' ? true : false"
                  style="width: 100% !important"
                />
                <el-select
                  v-if="item.type === 'select'"
                  v-model="form[item.prop]"
                  size="mini"
                  :disabled="moduleType === 'see' ? true : false"
                  style="width: 100%"
                >
                  <template v-if="item.child && item.label == '站点id'">
                    <el-option
                      v-for="(v, n) in item.child"
                      :key="n"
                      :label="v.label"
                      :value="v.value"
                    />
                  </template>
                  <template v-if="item.child">
                    <el-option
                      v-for="(v, n) in item.child"
                      :key="n"
                      :label="v.label"
                      :value="v.value"
                    />
                  </template>
                  <!-- <template v-if="item.child && item.label == '材质'">
                    <el-option
                      v-for="(v, n) in item.child"
                      :key="n"
                      :label="v.name"
                      :value="v.id"
                    />
                  </template> -->
                </el-select>
                <el-date-picker
                  v-if="item.type == 'date'"
                  v-model="form[item.prop]"
                  size="mini"
                  type="date"
                  placeholder="选择日期"
                  :disabled="moduleType === 'see' ? true : false"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <div v-if="item.type === 'linkage'" style="width: 100%">
              <el-form-item
                v-for="(v1, n1) in item.child"
                :key="n1"
                :label="v1.label"
                :prop="v1.prop"
              >
                <el-input
                  v-model="form[v1.prop]"
                  size="mini"
                  :disabled="moduleType === 'see' ? true : false"
                  style="width: 100%"
                />
              </el-form-item>
            </div>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="close(0)">取消</el-button>
          <el-button size="mini" type="primary" @click="close(1)"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'commondialog',
  components: {},
  props: {
    showModel: {
      type: Boolean,
      default: false,
    },
    moduleType: {
      type: String,
      default: 'see',
    },
    formTable: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      moduleObj: {
        see: '查看',
        edit: '编辑',
        add: '新增',
      },
      dialogVisible: false,
      dialogType: null,
      form: {
        name: '',
        status: '',
      },
      detailObj: {},
    }
  },
  computed: {},
  watch: {
    showModel(newval, oldeval) {
      console.log('showModel发生变化', newval)
      if (!newval) {
        // this.$refs['form'].clearValidate()
        this.$refs['form'].resetFields()
      }
      this.dialogVisible = newval
    },
    moduleType() {
      this.dialogType = this.moduleType
    },
  },
  mounted() {
    console.log('this.formItemArr121212', this.formTable)

    console.log('this.formTable', this.formTable[3].child)
    this.dialogVisible = this.showModel
    this.dialogType = this.moduleType
  },
  methods: {
    // 重置
    reSet() {
      console.log('重置')
      this.detailObj = {}
      this.$refs['form'].resetFields()
      // this.form = {
      // }
    },
    handleClose(done) {
      console.log('叉号关闭')
      this.$emit('fatherClose')
    },
    clearValidate() {
      console.log(this.$refs['form'])
      if (this.$refs['form']) {
        console.log('清除校验')
        this.$refs['form'].clearValidate()
      }
    },
    // render
    renderpage(data) {
      console.log(data)
      this.detailObj = data
      this.form = data
    },
    // 0 取消 1 确定
    close(type) {
      console.log(type)
      if (type === 0) {
        this.$emit('fatherClose')
        return
      } else {
        if (this.moduleType === 'see') {
          this.$emit('fatherClose')
        } else {
          this.$refs['form'].validate((valid) => {
            console.log('执行了校验')
            if (valid) {
              if (this.moduleType === 'edit') {
                this.form.id = this.detailObj.id
                this.form.group_mater = this.form.group_mater.toString()
                this.$emit('fatherEdit', this.form)
              } else if (this.moduleType === 'add') {
                this.form.group_mater = this.form.group_mater.toString()
                this.$emit('fatherAdd', this.form)
              }
            } else {
              console.log('error submit!!')
              return false
            }
          })
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
/*::v-deep .el-dialog{*/
/* height: 70vh;*/
/* overflow-y: scroll;*/
/*}*/
.w100 {
  width: 100%;
}
</style>
